<template>
  <!-- 2.第二个问答区 多选-->
  <div class="card-right">
    <a-row class="mb-[15px]">
      <a-col :span="24">
        <span class="shu">|</span>
        <span>{{ Info.topic.title }}</span>
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        <a-checkbox-group v-model="value" @change="onChange">
          <div v-for="(item, i) in Info.answer" :key="i">
            <a-checkbox :style="radioStyle" :value="item.AnswerQid" :disabled="item.disabled">
              <span class="checkLabel"> {{ item.AnswerInfo }} </span>
            </a-checkbox>
            <p />
            
            <span style="position: relative;">
              <a-textarea
              v-if="item.textType && item.AnswerRequired"
              v-model="item.required"
              v-show="
                Info.topic.topicRequired == 1 || Info.answer[i].AnswerRequired
              "
              :auto-size="{ minRows: 3, maxRows: 10 }"
              :placeholder="$t('user.verification-code.required111566110577274') "
              :rows="3"
              :maxlength=" 3000 " 
              style="width: 615px"
              @input="textChange(item)" 
            />
            <i v-if="item.textType && item.AnswerRequired" style="position: absolute; top: -5px; right: 24px;font-size: 12px; color: #cbcbcb; z-index: 10" >{{ wordCount }} / 3000</i>
            </span>
          </div>
        </a-checkbox-group>
      </a-col>
      <a-col> </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  props: {
    Info: {
      type: Object,
    },
    Answer: {
      type: Object,
    },
    DpiaModelId: {
      type: Number,
    },
  },
  data() {
    return {
      value: [],
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
        margin: "5px",
        fontSize: "15.5px",
        whiteSpace: "normal",
        wordBreak: "break-all",
      },
      textValue: [],
      checkboxValue: "",
      answerName: "", //题目名称存
      textValueText: "", // 组合文案存
      wordCount: 0,
      // totalCount:"",
      wordValue: "",
    };
  },
  created() {
    this.init();
    // console.log(this.Info, this.Answer);
  },
  mounted() {
    const valueT = this.textValueText.split(",!$")[1]
    this.wordCount  = valueT.length
    // if (this.DpiaModelId == 96) {
    //   this.totalCount = "2500";
    // }else if (this.DpiaModelId == 106) {
    //   this.totalCount = "5000";
    // }
  },
  methods: {
    init() {
      // console.log('初始化各种值');
      if (this.Answer != {}) {
        if (this.Answer.answer != "") {
          // console.log(this.Answer);
          this.checkboxValue = this.Answer.answer;
          // this.textValue = this.Answer.required
          var tempLists = [];
          var answerStr = this.Answer.answer.split(",");
          if (eval(this.Answer.type) == 2) {
            for (var i = 0; i < answerStr.length; i++) {
              tempLists.push(parseInt(answerStr[i]));
            }
            for (var i = 0; i < this.Info.answer.length; i++) {
              if (tempLists.indexOf(this.Info.answer[i].AnswerQid) > -1) {
                this.Info.answer[i].textType = true;
              } else {
                this.Info.answer[i].textType = false;
              }
            }
            this.value = tempLists;
          }
          this.textValueText = this.Answer.required;
          this.onChange(tempLists);
        }
      }
    },
    // 多选框
    onChange(e) {
      // if (this.DpiaModelId == 96) {
      //   this.totalCount = "2500";
      // }else if (this.DpiaModelId == 106) {
      //   this.totalCount = "5000";
      // }
      // console.log('看看我吧',this.Info.answer)
      var topicId = "";
      let answerName = [];
      let answerMutex = "";

      // 获取答案对应的题目ID
      for (var i = 0; i < this.Info.answer.length; i++) {
        if (e.indexOf(this.Info.answer[i].AnswerQid) > -1) {
          this.Info.answer[i].textType = true;
          topicId = this.Info.answer[i].TopicTid;
          answerName.push(this.Info.answer[i].AnswerInfo);
          answerMutex = this.Info.answer[i].AnswerMutex;
        } else {
          this.Info.answer[i].textType = false;
        }
      }
      this.checkboxValue = e.join();
      if (answerMutex === 1) {
        for (let i = 0; i < this.Info.answer.length; i++) {
          if (this.Info.answer[i].AnswerMutex === 0) {
            this.Info.answer[i].disabled = true;
            this.Info.answer[i].textType = false;
            if (e.indexOf(this.Info.answer[i].AnswerQid) > -1) {
              e.splice(e.indexOf(this.Info.answer[i].AnswerQid), 1);
            }
          }
        }
        this.checkboxValue = e.join(); // 更新 checkboxValue
        answerName = [];
      } else {
        // 恢复所有选项的可选状态
        this.Info.answer.forEach((item) => {
          item.disabled = false;
        });
      }
      // 存值
      this.answerName = answerName.join();

      // 章节、题目、答案
      setTimeout(() => {
        this.$emit("result", {
          title: this.Info.topic.title,
          answerName: this.answerName,
          topic: this.Info.answer[0].TopicTid,
          chapter: this.Info.topic.chapter,
          AnswerQid: this.checkboxValue,
          textValue: this.textValueText,
          type: 2,
        });
      });
    },

    textChange(item) {
      console.log(item);
      this.wordValue = item.required;
      this.wordCount =  this.wordValue.length;
      if (this.textValue) {
        let num = this.textValue.findIndex(
          (v) => v.AnswerQid == item.AnswerQid
        );
        if (num > -1) {
          this.textValue[num].required = item.required;
        } else {
          this.textValue.push({
            AnswerQid: item.AnswerQid,
            required: item.required,
          });
        }
      } else {
        this.textValue.push({
          AnswerQid: item.AnswerQid,
          required: item.required,
        });
      }
      let textValueStr = [];
      this.textValue.forEach((item) => {
        textValueStr.push(Object.values(item).join(",!$"));
      });

      // 存值
      this.textValueText = textValueStr.join("%^#");
      // 章节、题目、答案
      // console.log(111);
      this.$emit("result", {
        title: this.Info.topic.title,
        answerName: this.answerName,
        topic: this.Info.answer[0].TopicTid,
        chapter: this.Info.topic.chapter,
        AnswerQid: this.checkboxValue,
        textValue: this.textValueText,
        type: 2,
      });
    },


  },
};
</script>
<style lang="less" scoped>
.card-right {
  margin: 30px 30px 30px 60px;
}

.shu {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
.ant-checkbox-wrapper {
  height: auto !important;
}
.checkLabel {
  word-break: normal;
}
</style>